<template lang="pug">
el-dialog(title="微商城轮播广告" :visible.sync="newadd" :before-close="close" append-to-body)
    goodslist(@getgoodsid="getgooditem")
    el-form(:v-model="f" label-position="right" label-width="80px")
        el-form-item.is-required(label="广告名称")
            el-input(v-model="f.name" auto-complete="off")
        el-form-item(label="广告图片")
            el-upload(drag action="http://up-z0.qiniu.com" :data="uploadData"
            :file-list="fileDetailUploadList" :on-success="handleDetailUploadSuccess"
            :on-remove="handleDetailRemove" :on-error="handleUploadError" :before-upload="handleBeforUpload"
            list-type="picture-card")
                .el-upload__text 将文件拖到此处，或
                    em 点击上传
                .el-upload__tip(slot="tip") 只能上传jpg/png文件，且不超过500kb
        el-form-item(label="排序")
            el-input(v-model="f.sort" auto-complete="off")
        el-form-item(label="选择店铺")
            el-select(v-model="shop" placeholder="选择相应店铺" :disabled="shopidlist")
                el-option(label="全部" value="0" v-if="shirott")
                el-option(v-for="item in opts" :key="item.shopId" :label="item.shopName" :value="item.shopId")
        el-form-item(label="是否启用")
            el-radio-group(v-model="a")
                el-radio-button(:label="0") 不启用
                el-radio-button(:label="1") 启用
        el-form-item(label="链接类型")
            el-radio-group(v-model="type" @change="clt")
                el-radio-button(label="URL")
                el-radio-button(label="商品")
                el-radio-button(label="分类")
        el-form-item.is-required(label="链接地址" v-if="n1")
            el-input(v-model="f.url")
        el-form-item.is-required(label="关联商品" v-if="n2")
            el-input(v-model="g" readonly type="number" style="width:50%")
            el-button(@click="chagegoods") 选择商品
        el-form-item.is-required(label="选择分类" v-if="n3" prop="k")
            el-select(v-model="k" placeholder="请选择分类")
                el-option(v-for="i in gkopt" :key="i.gcId" :label="i.gcName" :value="i.gcId")
    .dialog-footer(slot="footer")
        el-button(@click="close") 取消
        el-button(type="primary" @click="save") 确定
</template>
<script>
import goodslist from 'components/goodslist'
    export default{
        props:['Position'],
        data(){
            return{
                shirott:true,
                n1:true,
                n2:false,
                n3:false,
                newadd:false,
                linktype:0,
                type:'URL',
                shopidlist:false,
                k:'',
                g:0,
                shop:'0',
                a:'0',
                f:{},
                uploadData: {
                    key: '',
                    token: ''
                },
                fileDetailUploadList:[],
                gkopt:[],
                thisid:-1,
                opts:[]
            }
        },
        components:{
            goodslist
        },
        computed:{
            getstate(){
                return this.$store.state.wxconfigclass;
            },
            getchange(){
                return this.$store.state.wxconfig;
            }
        },
        watch:{
            getstate(v){//打开弹窗
                this.newadd=v
                if(v){
                    this.getGoodKind()
                }
                this.getshop()
            },
            getchange(v){//获取到入参的数据
                console.log(v)
                if(!v){
                    return
                }
                if(!v.id){
                    this.thisid=-1
                    return
                }
                this.f.name=v.name
                this.fileDetailUploadList=[]
                this.fileDetailUploadList.push({
                    name: '',
                    url: v.image
                }),
                this.f.sort=v.sort
                if(v.type==1){
                    this.type="URL"
                    this.clt('URL')
                    this.f.url=v.url
                }else if(v.type==2){
                    this.type="商品"
                    this.clt('商品')
                    this.g = v.objectId
                }else if(v.type==3){
                    this.type="分类"
                    this.clt('分类')
                    this.k = parseInt(v.objectId)
                }
                this.a=v.showFlag
                this.thisid=v.id
               
                if(this.$store.state.shiro){//超管
                    if(v.shopId==0){
                        this.shop=v.shopId.toString()
                    }else{
                        this.shop=parseInt(v.shopId)
                    }
                }else{//店长
                    if(v.shopId==0){
                        this.shop=v.shopId.toString()
                    }else{
                        this.shop=parseInt(v.shopId)
                    }
                    this.shopidlist=true
                    this.shirott=true
                }
            }
        },
        methods:{
            fkselect(v){//获取选中的项
                this.k=''
                this.k=v
            },
            clt(v){//切换显示的input
                switch(v){
                    case 'URL':
                        this.n1=true
                        this.n2=false
                        this.n3=false
                        break;
                    case '商品':
                        this.n1=false
                        this.n2=true
                        this.n3=false
                        break;
                    case '分类':
                        this.n1=false
                        this.n2=false
                        this.n3=true
                        break;
                }
            },
            close(){//关闭弹窗清空数据
                this.type='URL'
                this.f={}
                this.fileDetailUploadList=[]
                this.thisid=-1
                this.g=0
                this.k=''
                this.shop=''
                this.a='0'
                this.n1=true
                this.n2=false
                this.n3=false
                this.$store.state.wxconfig={}
                this.$store.state.wxconfigclass=false
            },
            qiniuyunup(_vm, file, rule) {
                const isJPG = file.type === 'image/jpeg'
                const isPNG = file.type === 'image/png'
                const isFitSize = rule.maxSize ? file.size / 1024 / 1024 < rule.maxSize : 'undefined';
                if (rule.isJPG || rule.isPNG) {
                    if (!isJPG && !isPNG) {
                        _vm.$message.error('图片只能是 JPG/PNG 格式!');
                        return false
                    }
                }
                if (isFitSize != 'undefined' && !isFitSize) {
                    _vm.$message.error('大小不能超过 ' + rule.maxSize + 'MB!');
                    return false
                }
            },
            handleDetailUploadSuccess(response, file, fileList) {
                var newFile = {
                    name: file.name,
                    url: window.qiniuHost + response.key
                }
                this.fileDetailUploadList = []
                this.fileDetailUploadList.push(newFile)
            },
            handleDetailRemove(){
                this.fileDetailUploadList = []
            },
            handleUploadError(error, file, fileList) {
                const _this = this
                _this.$message.error('上传失败')
            },
            handleBeforUpload(file) {
                // console.log("file",file)
                const _this = this
                let rule = {
                    isJPG: true,
                    isPNG: true,
                    maxSize: 2
                }
                var suffix = file.name.split('.')
                this.uploadData.key = new Date().getTime() + '.' + suffix[1]
                this.uploadData.token = this.$store.state.qiniuToken
                return this.qiniuyunup(_this, file, rule)
            },
            chagegoods(){//打开商品选择的弹窗
                this.$store.commit('ChangeWxGood')
            },
            getshop(){//获取店铺
                if(this.$store.state.shiro){
                    this.opts=[].concat(this.$store.state.TOPshop)
                }else{
                    if(this.$store.state.TOPshopID!=''&&this.$store.state.TOPshopName!=''){
                        var shop={}
                        for(var i=0;i<this.$store.state.TOPshop.length;i++){
                            if(this.$store.state.TOPshop[i].shopId==this.$store.state.TOPshopID){
                                shop=this.$store.state.TOPshop[i]
                                this.opts.push(shop)
                                this.shop=this.$store.state.TOPshopID
                            }
                        }
                        this.shopidlist=true
                        this.shirott=false
                    }
                }
            },
            getGoodKind(){//获取商品分类
                var _this=this
                axios.get('/listXcxGoodsClass.do').then(r=>{
                    // console.log(r.data)
                    if(r.data.code!=200){
                        return
                    }
                    _this.gkopt=[].concat(r.data.response.xcxGoodsClassList)
                })
            },
            getgooditem(m){//获取选中的商品id
                this.g=''
                this.g=m
            },
            save(){//保存
                var _this=this
                var p=new URLSearchParams()
                p.append("name",this.f.name)
                if(this.type=='URL'){
                    p.append("type",1)
                    if(this.f.url==''){
                        this.$message({
                            message:"请填写URL",
                            type:'info'
                        })
                        return
                    }
                    p.append("url",this.f.url)
                }else if(this.type=='商品'){
                    p.append("type",2)
                    if(this.g==''){
                        this.$message({
                            message:"请添加商品",
                            type:"info"
                        })
                        return
                    }
                    p.append("objectId",this.g)
                }else if(this.type=='分类'){
                    p.append("type",3)
                    if(this.k==''){
                        this.$message({
                            message:'请选择商品类型',
                            type:'info'
                        })
                        return
                    }
                    p.append("objectId",this.k)
                }
                p.append("position",this.Position)
                if(this.fileDetailUploadList[0].url=='' || this.fileDetailUploadList[0].url==undefined){
                    this.$message({
                        message:'请上传图片',
                        type:'info'
                    })
                    return
                }
                if(this.shop==''){
                    this.$message({
                        message:'请选择店铺',
                        type:'info'
                    })
                }
                p.append("shopId",this.shop)
                p.append("image",this.fileDetailUploadList[0].url)
                if(this.f.sort==''){
                    this.$message({
                        message:"排序不能为空",
                        type:'info'
                    })
                    return
                }
                p.append("sort",this.f.sort)
                p.append("showFlag",this.a)
                if(this.thisid!=-1){//修改
                    p.append("id",this.thisid)
                    axios.post("/updateXcxAdvertById.do",p).then(r=>{
                        // console.log("修改",r)
                        if(r.data.code==200){
                            _this.$message({
                                message:'修改成功',
                                type:'success'
                            })
                            _this.$store.state.wxconfignew=false
                            _this.close()
                        }else{
                            _this.$message({
                                message:r.data.message,
                                type:'error'
                            })
                        }
                    })
                }else if(this.thisid==-1){//新增
                    axios.post("/saveXcxAdvert.do",p).then(r=>{
                        // console.log("新增",r)
                        if(r.data.code==200){
                            _this.$message({
                                message:'添加成功',
                                type:'success'
                            })
                            _this.$store.state.wxconfignew=false
                            _this.close()
                        }else{
                            _this.$message({
                                message:r.data.message,
                                type:'error'
                            })
                        }
                    })
                }
            }
        }
    }
</script>
<style>
.el-upload-dragger{
    height: 160px !important;
}
</style>
